<template>
  <!--左侧组件库-->
  <div class="component-left">
    <el-collapse v-model="activeNames">
      <el-collapse-item title="基础组件" name="1">
        <div class="component-libs">
          <draggable
            :list="componentsLibs"
            :clone="cloneDog"
            :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
            :sort="false">
            <div class="component-lib-item"
                 v-for="(element,index) in componentsLibs"
                 :key="index">
              <i :class="[element.icon]"></i>
              <p>{{ element.title }}</p>
            </div>
          </draggable>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
  import eleConfig from "@/common/eleConfig";
  import draggable from 'vuedraggable'
  import {mapGetters} from 'vuex'
  import {createUUID, deepClone} from "@/common/utils";

  export default {
    components: {draggable},
    name: "EditLeft",
    data() {
      return {
        activeNames: ['1'],
        componentsList: [...eleConfig],
      };
    },
    computed: {
      ...mapGetters(['componentsLibs'])
    },
    methods: {
      cloneDog(elData) {
        const currentClone = deepClone(elData)
        currentClone.id = createUUID()
        return currentClone
      }
    },
  }
</script>

<style scoped>

</style>
